<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模版语法</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值语法</h1>
    <h3>Hello, {{name}}</h3>

    <hr/>

    <h1>指令语法</h1>
    <a v-bind:href="school.url">Go 163</a>
    <a :href="school.url">Go 163 - Simple</a>

    <hr/>

    <h1>数据绑定</h1>
    <!--    完整写法-->
    <!--    <label>单向数据绑定: <input type="text" v-bind:value="band.oneValue"></label> <br/>-->
    <!--    <label>双向数据绑定: <label><input type="text" v-model:value="band.oneValue"></label>-->
    <!--    简写-->
    <label>单向数据绑定: <input type="text" :value="band.oneValue"></label> <br/>
    <label>双向数据绑定: <label><input type="text" v-model="band.oneValue"></label>

</div>

<div id="tree">
    <h2> 第二站挂载页面元素及Data写法:  {{name}}</h2>
</div>

<script type="text/javascript">
    /*  模版语法分为: 插值语法和指令语法
    *   1、插值语法用于标签体内容
    *   2、指令语法用于解析标签(标签属性,标签体内容,绑定事件...)
    * */
    new Vue({
        el: '#root',
        // data的第一种写法: 对象式
        data: {
            name: 'ZhangSan',
            school: {
                url: 'http://www.163.com'
            },
            // v-model 双向绑定只能用于表单类(输入)元素上
            band: {oneValue: 'Grad'}

        }
    });

    /*vue第二种挂载页面区域方式*/
    const newObj = new Vue({
        // data的第二种写法: 函数式
        data: function (){
            return {
                name: 'LiSi'
            }
        }
    })
    newObj.$mount('#tree')
</script>

</body>
</html>